import React, { useState, useEffect, useRef } from 'react'
import './StepCardList.css'
import arrow from '@/assets/CompanyDevelopment/arrow.png'

interface StepCardListProps {
  data: { label: string; value: string }[]
  dataLength: number
}

const StepCardList: React.FC<StepCardListProps> = ({ data, dataLength }) => {
  const refsStepCardList = useRef<HTMLUListElement>(null)
  const [stepCardItemWidth, setStepCardItemWidth] = useState('')

  const getStepCardListData = () => {
    if (refsStepCardList.current) {
      const el = refsStepCardList.current
      const content = el.querySelector('.item-box')
      if (content) {
        setStepCardItemWidth(`${content.offsetWidth}px`)
      }
    }
  }

  useEffect(() => {
    getStepCardListData()
  }, [])

  return (
    <div className="step-card-list-container">
      <ul ref={refsStepCardList} className="step-card-list-list">
        {data.map((item, index) => (
          <li
            key={index}
            style={{
              width: index !== dataLength - 1 ? `calc(${100 / (dataLength - 0.5)}% - 9px)` : 'auto'
            }}
            className="step-card-list-list-item">
            <div className="item-box" style={{ width: index === dataLength - 1 ? stepCardItemWidth : '70%' }}>
              <div className="title">{item.label}</div>
              <div className="value">
                {item.value}
                <span className="unit">件</span>
              </div>
            </div>
            {index !== dataLength - 1 && (
              <div className="item-arrow">
                <img className="item-arrow-img" src={arrow} alt="" />
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default StepCardList
